<template>
  <div class="leftBottom" ref="leftBottom">
    <div class="top">
      <div class="hTitle">
        <span>任务使用概况</span>
      </div>
      <div class="selectTime">
        <el-date-picker v-model="pickertime" size="mini" @change="onChange" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" clearable>
        </el-date-picker>
      </div>
    </div>
    <el-table :data="messagelist" :header-cell-style="{ background: '#fff', color: '#000' }" highlight-current-row style="width: 100%; margin-top: 1rem" border size="mini"
      :max-height="tableConfig.height">
      <el-table-column prop="taskType" label="任务类型" align="center">
      </el-table-column>
      <el-table-column prop="taskName" label="任务名称" align="center">
      </el-table-column>
      <el-table-column prop="taskStatus" label="任务状态" align="center">
      </el-table-column>
      <el-table-column prop="deviceNum" label="升级设备数" align="center">
      </el-table-column>
      <el-table-column prop="successRate" label="升级成功率" align="center">
      </el-table-column>
    </el-table>
    <div style="text-align: right">
      <pagination v-show="pagination.total > 0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
    </div>
  </div>
</template>

<script>
// import { getDeviceStat, getDeviceAlarmTrend, getAllDevices, getAllDevicesOther, getTaskStat } from '@/api/device'
// import { pageAll, pageAlarm } from '@/api/devOps/inspectionTask';
import * as homeApi from "@/api/home";

export default {
  data() {
    return {
      pickertime: [],
      messagelist: [],
      tableConfig: {
        height: 170,
      },
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      tenantId: null,
    };
  },
  created() { },
  mounted() {
    this.getCountTask();
    this.$bus.$on("tenantId", (val) => {
      // console.log(val, "租户出过来================>");
      if (val == "") {
        this.tenantId = null;
      } else {
        this.tenantId = val;
      }
      this.getCountTask({ page: this.pagination.page, pageSize: this.pagination.pageSize, tenantId: this.tenantId });
    });
  },
  methods: {
    getPageList() {
      // this.pagination.page = 1
      // this.getCountTask({page:this.pagination.page,pageSize:this.pagination.pageSize});
      var p = Object.assign(this.pagination);
      if (this.pickertime.length > 0) {
        p.startTime = this.pickertime[0];
        p.endTime = this.pickertime[1];
      }
      this.getCountTask(p);
    },
    getHeight() {
      // console.log(this.$refs.leftBottom.offsetHeight);
      this.$nextTick(() => {
        this.tableConfig.height = this.$refs.leftBottom.offsetHeight - 50;
      });
    },
    // 任务使用概况
    getCountTask(data) {
      // console.log(data)
      homeApi.getCountTask(data).then((resp) => {
        if (resp.data.list) {
          this.messagelist = resp.data.list;
          this.pagination = resp.data.pagination;
          this.pagination.page = resp.data.pagination.current;
        } else {
          this.messagelist = [];
        }
      });
    },
    onChange(val) {
      // console.log(val)
      this.pagination.page = 1
      var p = Object.assign(this.pagination);
      p.tenantId = this.tenantId
      if (val && this.pickertime.length > 0) {
        p.startTime = this.pickertime[0];
        p.endTime = this.pickertime[1];
      }
      this.getCountTask(p);
    },
  },
};
</script>

<style lang="scss" scoped>
.leftBottom {
  height: 100%;
  width: 100%;
  .top {
    position: relative;
  }
}
.statistics {
  margin-bottom: 30px;
  color: #000;
  font-size: 14px;
  text-align: center;
}
.hTitle {
  font-size: 18px;
  color: #303133;
  line-height: 28px;
  padding-left: 10px;
  span {
    &:before {
      content: " ";
      width: 3px;
      height: 65%;
      position: absolute;
      top: 5px;
      left: 0;
      background: #4a80e2;
    }
  }
}
.selectTime {
  position: absolute;
  right: 0;
  top: -5px;
}
</style>